import React, { useMemo, useState } from 'react';
import SectionTitle from '@/components/SectionTitle'
import InitForm from '@/components/InitForm';
import { Link, useIntl, connect, history } from 'umi';
import { Image, Empty, Card, Button, Input, Checkbox, Tooltip, Form, message, Popconfirm } from 'antd';
import styles from "./index.less"
import DragModal from '@/components/DragModal'
import Fogot from '@/components/Fogot'
import PhoneMail from '@/components/Fogot/PhoneMail'
import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons'
import { doFetch } from '@/utils/doFetch'
import { useRequest } from 'umi'
import moment from 'moment';

// 替换邮箱字符
function regEmail(email) {
    if (String(email).indexOf('@') > 0) {
        var str = email.split('@'),
            _s = '';
        if (str[0].length > 3) {
            for (var i = 0; i < str[0].length - 3; i++) {
                _s += '*';
            }
        }
        var new_email = str[0].substr(0, 3) + _s + '@' + str[1]
    }
    return new_email
}

// 替换手机字符
function regMobile(mobile) {
    if (mobile.length > 7) {
        var new_mobile = mobile.substr(0, 3) + '****' + mobile.substr(7)
    }
    return new_mobile
}

// function checkStrong(val) {
//     let modes = {
//         text: "",
//         color: ""
//     };
//     if (val.length < 6) return null;
//     if (/\d/.test(val)) {
//         nodes = {
//             text: "弱",
//             color: "red"
//         }
//     }; //数字
//     if (/[a-z]/.test(val)) {
//         nodes = {
//             text: "中",
//             color: "#ff4800"
//         }
//     }; //小写
//     if (/[A-Z]/.test(val)) {
//         nodes = {
//             text: "强",
//             color: "lightgreen"
//         }
//     }; //大写 
//     if (/\W/.test(val)) {
//         nodes = {
//             text: "极强",
//             color: "green"
//         }
//     };
//     return modes;
// };

let Account = ({ login }) => {
    let { lastlogininfo: { telephone, mailNo } } = login,
        [iftype, cf] = useState({}),
        [visible, cv] = useState(false)


    return (
        <div className="nopa">
            <Card title="登录密码" extra={[<a onClick={() => {
                cv(true);
                cf({
                    title: "修改密码",
                    type: "pwd"
                })
            }}>修改密码</a>]}>
                <span>
                    安全性高的密码可以使账号更安全。建议您定期更换密码,且设置一个包含数字和字母,长度超过8位以上的密码。
                </span>
            </Card>
            <Card
                title={<span>{telephone ? <CheckCircleFilled style={{ color: "green" }} /> : <CloseCircleFilled style={{ color: "red" }} />} {telephone ? "已绑定手机" + regMobile(telephone) : "未绑定手机"}</span>}
                extra={[<a onClick={() => {
                    cv(true);
                    cf({
                        title: telephone ? "修改手机号" : "绑定手机",
                        type: "phone"
                    })
                }}>{telephone ? "修改手机号" : "绑定手机"}</a>]}
                style={{ margin: "12px 0" }}
            >
                绑定手机后,您即可享受中国制造网内贸站丰富的手机服务,如手机登录、手机找回密码、接收信息等
            </Card>
            <Card
                title={<span>{mailNo ? <CheckCircleFilled style={{ color: "green" }} /> : <CloseCircleFilled style={{ color: "red" }} />} {mailNo ? "已绑定邮箱" + regEmail(mailNo) : "未绑定邮箱"}</span>}
                extra={[<a onClick={() => {
                    cv(true);
                    cf({
                        title: mailNo ? "修改邮箱" : "绑定邮箱",
                        type: "mail"
                    })
                }}>{mailNo ? "修改邮箱" : "绑定邮箱"}</a>]}
                style={{ margin: "12px 0" }}
            >
                绑定邮箱后,可通过邮箱进行安全验证、找回密码等重要操作,且可作为登录名直接用于登录。
            </Card>

            <DragModal
                title={iftype.title}
                visible={visible}
                onCancel={() => {
                    cv(false)
                }}
                footer={false}
                width={600}
            >
                {
                    iftype.type == "pwd" ?
                        <Fogot activecolor="#333" unactivecolor="#999" auto={telephone} type="2" close={() => {
                            cv(false)
                        }}></Fogot> :
                        <PhoneMail phone={telephone} mail={mailNo} checkType={iftype.type == "phone" ? 1 : 2} close={() => {
                            cv(false)
                        }}></PhoneMail>
                }

            </DragModal>

        </div>
    )
}

export default connect(({ global, login }) => ({
    global,
    login,
}))(Account);
